	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/top.css">
    <title>可用消费券</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{ color:#949494; font-size:14px; padding-left:10px;}
        input::-ms-input-placeholder{text-align: center;}
        .header{ text-align: center; background-color: #EF9B15; color: aliceblue; width: 100%; height: 40px; line-height: 40px;}
		.h-left{float:left;width:15%; height:40px;}
        .h-left a{ display:block; width:45px; height:40px; margin:auto; background: url(images/splb_icon_back.png) no-repeat 15px center; background-size: auto 16px; }
		.h-mid { width:70%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#FFF; font-size:12px;}
		.body{padding:3%}
		.title{color:#949494;font-size:14px;border-bottom:1px solid #949494;padding-bottom:10px}
		.ticketlist{}
		.ticket{padding-top:8%;}
		.ticket .ticketbody{position:relative;padding-left:5%;padding-top:3%;background:url(images/xfq_bg_01.png) no-repeat;background-size:100% 100%;background-position:center;}
		.price{font-size:36px;font-weight:bold;color:#EF9B15;}
		.price span{padding-left:5%;font-size:18px;font-weight:bold;color:#949494;}
		.note{padding-top:1%;font-size:14px;color:#949494;}
		.note span{color:#EF9B15;font-weight:bold;}
		.date{padding-bottom:2%;padding-right:1%;float:right;font-size:10px;color:#949494;}
		.clearfix:after {content: " ";display: block;clear: both;height: 0;}
		.clearfix {zoom: 1;}
		.count{width:35px;height:35px;border-radius:50px;border:solid #F06671 1px;background-color:#EF9B15;text-align:center;line-height:35px;font-size:20px;font-weight:bold;color:white;position:absolute;top:-18px;right:5%}
        .body{ float: left; width: 94%;}
    </style>
</head>
<body>
	<div class="header">
	<div class="top" style="border-bottom:1px solid #9A9997;">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        消费查询
    </div>
    </div>
    <div class="body">
        <div class="title">
            <span>可用消费券（4笔）</span>
        </div>
        <div class="ticketlist">
        	<div class="ticket">
            	<div class="ticketbody clearfix">
                	<div class="count">X2</div>
                	<div class="price">￥10<span>会员日优惠券</span></div>
                    <div class="note">会员日满<span>88</span>元减<span>10</span>元</div>
                    <div class="date">生效范围：（2016-08-04~2016-08-05）</div>
                </div>
            </div>
            <div class="ticket">
            	<div class="ticketbody clearfix">
                <div class="count">X2</div>
                	<div class="price">￥50<span>电子抵用券</span></div>
                    <div class="note">会员满<span>100</span>元抵用<span>50</span>元</div>
                    <div class="date">生效范围：（2016-08-04~2016-08-05）</div>
                </div>
            </div>
            <div class="ticket">
            	<div class="ticketbody clearfix">
                	<div class="count">X2</div>
                    <div class="price">￥10<span>代金券</span></div>
                    <div class="note">满<span>88</span>元减<span>10</span>元</div>
                    <div class="date">生效范围：（2016-08-04~2016-08-05）</div>
                </div>
            </div>
            <div class="ticket">
            	<div class="ticketbody clearfix">
                	<div class="count">X2</div>
                	<div class="price">￥20<span>会员日优惠券</span></div>
                    <div class="note">会员日满<span>88</span>元减<span>22</span>元</div>
                    <div class="date">生效范围：（2016-08-04~2016-08-05）</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>